<template>
	<view class="container">
		<!-- 使用uView的空状态组件处理无数据情况 -->
		<u-empty v-if="comments.length === 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
			text="您还没有对医生的评论">
			<u-button type="primary" shape="circle" @click="goDoctors">
				去找医生
			</u-button>
		</u-empty>

		<!-- 评论列表 -->
		<scroll-view class="comment-list" scroll-y="true" v-else>
			<view class="comment-item" v-for="(item, index) in comments" :key="item.commentsId">
				<!-- 医生信息 -->
				<view class="doctor-info">
					<u-avatar :size="40" :src="item.avatar || 'https://via.placeholder.com/80'"></u-avatar>
					<view class="doctor-details">
						<text class="doctor-name">{{ item.doctorName }}</text>
						<view class="doctor-meta">
							<text class="department">{{ item.departmentName }}</text>
							<u-divider direction="column" :dot="true"></u-divider>
							<text class="level">
								{{ item.doctorLevelId == 0 ? "主治医师" : item.doctorLevelId == 1 ? "副主任医师" : "主任医师" }}
							</text>
						</view>
					</view>
					<!-- 删除按钮 -->
					<u-button type="error" size="mini" shape="circle" @click="showDeleteModal(item.commentsId, index)">
						删除
					</u-button>
				</view>

				<!-- 评论内容 -->
				<view class="comment-content">
					<!-- 评分 -->
					<view class="rating">
						<text class="rating-label">评分:</text>
						<u-rate :value="item.commentsScore" activeColor="#fa3534" inactiveColor="#b2b2b2" size="16"
							disabled></u-rate>
						<text class="rating-value">{{ item.commentsScore }}分</text>
					</view>

					<!-- 评论正文 -->
					<text class="comment-text">{{ item.commentsContent }}</text>

					<!-- 评论时间 -->
					<view class="comment-footer">
						<text class="comment-time">{{ item.commentsCreateTime }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 删除确认弹窗 -->
		<u-modal v-model="showModal" title="提示" content="确认删除这条评论吗？" :show-cancel-button="true" confirm-text="删除"
			cancel-text="取消" confirm-color="#fa3534" @confirm="confirmDelete" @cancel="showModal = false"></u-modal>
	</view>
</template>

<script>
	import {
		queryComments,
		deleteComments
	} from '@/api/mine.js'

	export default {
		data() {
			return {
				comments: [{
					commentsId: 1,
					doctorName: "张伟",
					departmentName: "心内科",
					doctorLevelId: 2,
					avatar: "https://via.placeholder.com/80",
					commentsScore: 5,
					commentsContent: "医生非常耐心，详细讲解了病情，治疗方案也很专业！",
					commentsCreateTime: "2023-07-15 14:30"
				}],
				showModal: false, // 控制弹窗显示与隐藏
				currentCommentId: null, // 记录当前要删除的评论ID
				currentIndex: -1 // 记录当前要删除的评论索引
			}
		},
		mounted() {
			this.getTableInfo()
		},
		methods: {
			async getTableInfo() {
				try {
					let temp = {
						userId: this.$store.state.userId
					}
					const res = await queryComments(temp)
					if (res.code === 1) {
						this.comments = res.data
					}
				} catch (error) {
					console.error('获取评论失败:', error)
					this.$u.toast('获取评论失败')
				}
			},
			goDoctors() {
				uni.switchTab({
					url: '/pages/doctors/index'
				})
			},
			// 显示删除确认弹窗
			showDeleteModal(commentId, index) {
				this.currentCommentId = commentId
				this.currentIndex = index
				this.showModal = true
			},
			// 确认删除
			async confirmDelete() {
				try {
					let temp = {
						commentsId: this.currentCommentId
					}

					//调用删除接口
					const result = await deleteComments(temp)

					console.log(result)

					if (result.code === 1) {
						this.$u.toast('删除成功')
						// 从本地列表中移除
						this.comments.splice(this.currentIndex, 1)
						// 如果列表为空，刷新数据
						if (this.comments.length === 0) {
							this.getTableInfo()
						}
					} else {
						this.$u.toast(result.message || '删除失败')
					}
				} catch (error) {
					console.error('删除评论失败:', error)
					this.$u.toast('删除评论失败')
				} finally {
					// 关闭弹窗并重置参数
					this.showModal = false
					this.currentCommentId = null
					this.currentIndex = -1
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 样式保持不变 */
	.container {
		padding: 20rpx;
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.comment-list {
		height: calc(100vh - 40rpx);
	}

	.comment-item {
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	}

	.doctor-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.doctor-details {
		margin-left: 20rpx;
		flex: 1;
	}

	.doctor-name {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		display: block;
	}

	.doctor-meta {
		display: flex;
		align-items: center;
		margin-top: 8rpx;
	}

	.department,
	.level {
		font-size: 24rpx;
		color: #666;
	}

	.rating {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.rating-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 12rpx;
	}

	.rating-value {
		font-size: 28rpx;
		color: #fa3534;
		font-weight: bold;
		margin-left: 12rpx;
	}

	.comment-text {
		font-size: 30rpx;
		color: #333;
		line-height: 1.6;
		display: block;
		margin-bottom: 20rpx;
	}

	.comment-footer {
		display: flex;
		justify-content: flex-end;
	}

	.comment-time {
		font-size: 24rpx;
		color: #999;
	}
</style>